<template>
  <div>
    <!--图片识别-->
    <el-card class="box-card" size="mini">
      <div slot="header" class="clearfix">
        <span>图片识别</span>
      </div>
      <div>
        <el-button
          v-for="(v, k) in dataArr"
          :key="k"
          type="primary"
          size="mini"
          @click="itemClick(k)"
        >{{ v }}</el-button>
      </div>
    </el-card>
    <text-local-image :is-show="text_localimage" @hidenFunc="hidenFunc"/>
    <text-url-image :is-show="text_urlimage" @hidenFunc="hidenFunc"/>
  </div>
</template>

<script lang="ts">
import TextLocalImage from "./text/localImage.vue";
import TextUrlImage from "./text/urlImage.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    TextLocalImage,
    TextUrlImage
  }
})
export default class WebToolImageIdentify extends Vue {
  // 数据数组
  dataArr = ["文字识别(本地图片)", "文字识别(图片链接)"];
  // 文字本地显示
  text_localimage = false;
  // 网络链接显示
  text_urlimage = false;

  // item点击
  itemClick(index: number) {
    this.showAndHidWithIndex(index, true);
  }
  // 隐藏的时候调用
  hidenFunc(index: number) {
    this.showAndHidWithIndex(index, false);
  }
  // 隐藏或者显示
  showAndHidWithIndex(index: number, isShow: boolean) {
    switch (index) {
      case 0:
        this.text_localimage = isShow;
        break;
      case 1:
        this.text_urlimage = isShow;
        break;
    }
  }
}
</script>

<style scoped>
</style>
